<template>
  <div class="box_yj" ref="parent" :style="chartsDom">
    <span></span>
    <div class="sq-title">人口男女分布</div>
    <!-- <div ref="charts" :style="chartsDom"></div> -->
    <div class="boxxx">
        <div style="width:50%" class="ddd">
            <div style="font-weight:bold;margin:0 0 5px 0">男</div>
            <el-progress :width='80' type="circle" :percentage="30" stroke-width='15' color='red' style="color:#fff !important" show-text='false'></el-progress>
        </div>
        <div  style="width:50%" class="ddd">
            <div style="font-weight:bold;margin:0 0 5px 0">女</div>
            <el-progress :width='80' type="circle" :percentage="70" stroke-width='15' color='blue'></el-progress>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartsDom: {},
      data2: [],
      data3: null,
      data4: [],
      jz: true,
      jz2: true,
      jz3: true
    };
  },
  props: ["height", "dateProp"],
  computed: {
    setStyle: {
      get() {
        return 0;
      },
      set(val) {
        this.chartsDom = {
          width: val - 30 + "px",
          height: this.height - 30  + "px",
          "z-index": 100,
          position: "relative",
          // 'background-color': 'red',
          overflow: "hidden",
          left: "-6px"
        };
      }
    }
    // data3ValueTotal() {
    //   return eval(this.data3.map(v=>v.value).join('+'))
    // }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_ => {
      this.init();
    });
  },
  methods: {
    init() {
      //     this.jz3=false
      //   get_JobTable_JobSupplyTop10(this.dateProp)
      //   .then(({data:{data}})=>{
      //     this.jz3=true
      //     this.data1 = data.length>0? data:[];
      // 	console.log('get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10')
      // 	console.log(this.data1)
      //   })
    },
  }
};
</script>
<style lang="stylus" scoped>
.section {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
.el-progress div{
    color:#fff !important 
    font-weight:bold
}
.boxxx{
    width 100%
    height 82%
    display flex
    justify-content center
    align-items center
    
}
.ddd{
    display flex
    justify-content center
    align-items center
    flex-direction column
}
</style>